<template>
    <div class="add-page">
        <flexbox>
            <flexbox-item><div class="add-cancel">x</div></flexbox-item>
            <flexbox-item><div class="add-tit">新建任务</div></flexbox-item>
            <flexbox-item><div class="add-confirm" @click="submitMission">创建</div></flexbox-item>
        </flexbox>
        <group>
            <cell-box>
                <span class="mission-tag" :class="{'mission-tag-active': tag.select}" v-for="(tag, index) in tags" @click="selectTag(tag, index)">{{tag.tag}}</span>
            </cell-box>
            <x-textarea title="详细信息" placeholder="别空想，要按计划实现" :rows="5" v-model="missionDesc"></x-textarea>
            <datetime v-model="endDate" title="实现时间"></datetime>
        </group>
    </div>
</template>

<script>
    import { Flexbox, FlexboxItem, Group, CellBox, Cell, XTextarea, Datetime, ToastPlugin } from 'vux'
    import Const from '../lib/const.js'
    import Vue from 'vue'
    Vue.use(ToastPlugin)
    export default {
        name: 'AddMission',
        components: {
            Flexbox,
            FlexboxItem,
            Group,
            CellBox,
            Cell,
            XTextarea,
            Datetime
        },
        data () {
            return {
                tags: [{
                    tag: '阅读',
                    select: false
                },{
                    tag: '外语',
                    select: false
                },{
                    tag: '电影',
                    select: false
                },{
                    tag: '运动',
                    select: false
                }],
                selectTags: [],
                endDate: '',
                missionDesc: ''
            };
        },
        methods: {
            selectTag(tag,index) {
                tag.select = !tag.select;
                if (tag.select) {
                    this.selectTags.push(tag.tag);
                } else {
                    this.selectTags.splice(this.selectTags.indexOf('tag.tag'), 1)
                }
            },
            submitMission() {
                var that = this;
                this.$http.post(Const.host + '/api/addmission',{
                    mission: this.selectTags.join(),
                    description: this.missionDesc,
                    timelimit: this.endDate
                },{
                    headers:{
                        'Authorization': 'Bearer ' + localStorage.getItem("token")
                    }
                }).then(response => {
                    console.log(response)
                    if (response.data.code == '1') {
                        this.$vux.toast.show({
                            text: '添加成功',
                            time: 1000,
                            position: 'middle',
                            onHide: function(){
                                that.$router.push('/Mission')
                            }
                        })
                    } else {
                        this.$vux.toast.show({
                            text: response.data.msg,
                            time: 1000,
                            type: 'fail',
                            position: 'middle'
                        })
                    }
                }, response => {
                    console.log(response)
                });
            }
        }
    };
</script>

<style lang="less">
    @import '../assets/fontdpr_set.less';
    .add-page {
        .font-dpr(16px);
        .add-cancel {
            text-align: left;
            padding-left: 1em;
        }
        .add-tit {
            text-align: center;
        }
        .add-confirm {
            text-align: right;
            padding-right: 1em;
        }
        .mission-tag {
            border-radius: 0.078125rem;
            padding: 0.078125rem;
            background: #f2f2f2;
            margin-right: 0.3125rem;
        }
        .mission-tag-active {
            background: yellow;
        }
    }
</style>